<template>
  <div>
    <c-title :hide="false" text="改价列表"></c-title>
    <div class="flex-col flex-1 group">
      <div class="flex-col qwe">
        <div class="flex-row justify-between items-center self-stretch group_2">
          <div class="font_66 text_2" v-for="(item,index) in tabList" :key="index" @click="tabsOn(item.index)">
            <span :class="item.index == tabsId ? 'fontbb' : ''">{{ item.title }}</span>
          </div>
        </div>
      </div>
      <div class="flex-col list mt-14-5">
        <div class="flex-col mt-14 list-item" v-for="(item,index) in items" :key="index">
          <div class="flex-row group_3">
            <img class="shrink-0 self-center image_4" :src="item.goods.thumb" />
            <div class="flex-col flex-1 self-start group_4">
              <span class="self-start font_2">{{ item.goods.title }}</span>
              <div class="mt-30 flex-row self-stretch">
                <span class="font_3">金额</span>
                <div class="ml-6 group_5">
                  <span class="font_5">¥</span>
                  <span class="font_4">{{ item.price }}</span>
                </div>
              </div>
            </div>
            <img class="shrink-0 self-center image_5 image_6" @click="previewImage(item.img)" :src="item.img" />
          </div>
         
          <div class="flex-row justify-center items-center relative group_6" v-if="item.status==1">
            <span class="font_6 pos_2">使用者：张张</span>
            <span class="font_8 text_5">ID：3472893567928</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import changeListController from "./changeListController";

export default changeListController;
</script>


<style lang="scss" rel="stylesheet/scss" scoped>
@import "../common/common.css";
 
  .group {
    padding-bottom: 120px;
    overflow-y: auto;
  }
  .group_2 {
    padding: 1px 0 9px;
  }
  
  .text_2 {
    margin-right: 115px;
    color: #989898;
  }
 
  .list {
    padding: 0 15px;
  }
  .list-item {
    padding: 0 15px;
    background-color: #ffffff;
    border-radius: 12px;
  }
  .list-item:first-child {
    margin-top: 0;
  }
  .group_3 {
    padding: 16px 0 13px;
  }
  .image_4 {
    width: 80px;
    height: 80px;
    border-radius: 4px;
  }
  .group_4 {
    margin-left: 11px;
    margin-top: 5px;
  }
  .font_2 {
    font-size: 16px;
    font-family: PingFang SC;
    line-height: 15px;
    font-weight: 500;
    color: #151515;
    text-align: left;
  }
  .font_3 {
    font-size: 14px;
    font-family: PingFang SC;
    line-height: 13px;
    color: #151515;
  }
  .group_5 {
    line-height: 14px;
    height: 14px;
  }
  .font_5 {
    font-size: 12px;
    font-family: PingFang SC;
    line-height: 9px;
    color: #151515;
  }
  .font_4 {
    font-size: 18px;
    font-family: PingFang SC;
    line-height: 14px;
    font-weight: 500;
    color: #151515;
  }
  
  .image_5 {
    width: 60px;
    height: 60px;
  }
  .image_6 {
    margin-left: 20px;
    margin-right: 7px;
  }
  .image_7 {
    margin-right: 3px;
    width: 312px;
    height: 1px;
  }
  .group_6 {
    padding: 12px 1px 11px;
  }
  .font_6 {
    font-size: 11px;
    font-family: PingFang SC;
    line-height: 11px;
    color: #777777;
  }
  .pos_2 {
    position: absolute;
    left: 1px;
    top: 50%;
    transform: translateY(-50%);
  }
  .font_8 {
    font-size: 12px;
    font-family: PingFang SC;
    line-height: 9px;
    color: #777777;
  }
  .text_5 {
    line-height: 9px;
  }
  .font_7 {
    font-size: 12px;
    font-family: PingFang SC;
    line-height: 11px;
    color: #777777;
  }
  .pos_3 {
    position: absolute;
    right: 1px;
    top: 50%;
    transform: translateY(-50%);
  }
  .fontbb {
    position: relative;
    font-size: 18px;
    font-family: PingFang SC;
    line-height: 17px;
    font-weight: 700;
    color: #151515;
  }
  .fontbb::after {
    position: absolute;
    content: '';
    left: 50%;
    transform: translate(-50%, -50%);
    bottom: -9px;
    background-color: #b21d19;
    border-radius: 1px;
    width: 17px;
    height: 3px;
  
  }
  .qwe {
    width: 250px;
    height: 45px;
    margin: auto;
    display: flex;
    justify-content: center;
  }
  .font_66 {
    font-size: 18px;
      font-family: PingFang SC;
      line-height: 14px;
      font-weight: 700;
      color: #9b9b9b;
  }
</style>